const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const cleanPlugin = require('clean-webpack-plugin');
module.exports = {
    entry:{
        index:'./src/js/index.js',
        detail:'./src/js/detail.js'
    },
    // mode:'production',
    output:{
        filename:'js/[name].[hash].js',
        path:path.resolve(__dirname,'./dist')
    },
    module:{
        rules:[
            {
                test:/\.js$/,    ///正则/
                exclude:/node_modules/, //排除node_modules文件
                use:{
                    loader:'babel-loader',
                    options:{
                        presets: ['@babel/preset-env']
                    }
                }
                // loader:'babel-loader',   
                // options:{
                //     presets: ['@babel/preset-env']
                // }
            },
            {
                test:/\.scss$/,
                use:ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use:['css-loader','sass-loader']
                })   //执行顺序是从右向左的
            },
            {
                test:/\.(png|jpg|gif|svg)$/,
                use:{
                    loader:'url-loader',
                    options:{
                        limit:1234,
                        name:'imgs/[name].[ext]',
                        publicPath:'/',
                    }
                }
            },
            {
                test:/\.html$/,
                use:{
                    loader:'html-loader',
                    options:{
                        attrs:['img:src']
                    }
                }
            }
        ]
    },
    plugins:[
        new cleanPlugin('./dist'),
        new ExtractTextPlugin({
            filename:'css/[name].css'
        }),
        new HtmlWebpackPlugin({
            chunks:['index'],
            filename:'index.html',
            template:'./src/index.html',
            title:'首页',
            // inject:'head'
        }),
        new HtmlWebpackPlugin({
            chunks:['detail'],
            filename:'detail.html',
            template:'./src/detail.html',
            title:'详情',
            // inject:'head'
        })
    ],
    devServer:{
        port:9090,
        host:'localhost',
        before(app){ //拦截前端请求
            
        },
        proxy:{
            '/classify':'http://localhost:3000'
        }
    },
    devTool:'cheap-module-eval-source-map'
}

